<template>
    <div class="page">
        <div class="bread">
            <el-breadcrumb :separator-icon="ArrowRight">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/product/sku' }">科研平台</el-breadcrumb-item>
                <el-breadcrumb-item>平台详情</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="mainbox">
            <!-- 介绍 -->
            <div class="mainbox_top u-p-40">
                <img src="../../assets/首页/daogu.png" alt="">
                <div class="mainbox_top_right u-m-l-20">
                    <div class="mainbox_top_right_top">
                        <div>
                            <p class="title">河南省xxx有限公司</p>
                        </div>
                       
                    </div>
                    <div class="mainbox_top_right_content">
                        <div class="u-m-tb-10 mainbox_top_right_content_item">
                            <p class="samewidth">地址：河南省新乡市xxxx</p>
                            <p class="samewidth">邮编：9527</p>
                        </div>
                        <div class="mainbox_top_right_content_item">
                            <p class="samewidth">单位性质：企业</p>
                            <p class="samewidth">注册资金（万元）：111</p>
                        </div>
                        <div class="u-m-tb-10 mainbox_top_right_content_item">
                            <p class="samewidth">注册年份：2018</p>
                            <p class="samewidth">备案年份：2023</p>
                        </div>
                        <div class=" u-m-tb-10 mainbox_top_right_content_item">
                            <p class="samewidth">研发类型：应用研究....</p>
                        </div>
                        <div class="mainbox_top_right_content_item">
                            <p class="samewidth">技术领域：先进制造与装备</p>
                        </div>
                    </div>
                </div>
            </div>
            <el-divider />
            <!-- 单位介绍 -->
            <div class="reasultdetail ">
                <div class="title">单位介绍</div>
                <p class="u-m-tb-20">按实际宽度和喀什孤岛惊魂开个会吧按实际宽度和安康金沙江开始
                    啊速度加快哈萨克觉得阿斯顿很健康阿什顿就卡省的看叫阿三的啊
                    按时鉴定会噶尽快可拉斯基的卢卡斯哈撒给的卡拉还是点卡爱神的
                    按时打卡韩国的卡沙iOS的机会克拉斯和噶教科书的和咯技术的和
                    啊的空间说的话金卡咯技术的卡死卡拉圣诞节安康杀手锏肯定会
                    啊空间杀死了看得见啊镂空设计到屁事多爱上丢亚哈斯丽江大理深刻的
                    爱哭说的话拉开圣诞节埃里克ask记得哈咯技术的回家拿上课了
                    爱神的箭偶怕谁立刻打开按计划十大拉克丝角度来看阿拉山口但是
                    安康叫啥卢卡斯觉得了哈快速导航卢卡斯的啊科技时代哈伦裤时间段内卢卡斯
                    爱丽丝的就雷拉龙科啊速度啦看到了离开的拉萨扩大
                </p>
            </div>
            <el-divider />
            <!-- 技术需求 -->
            <div class="aboutrequire">
                <div class="title">
                    技术需求
                </div>
                <div class="aboutrequirebox u-m-tb-20">
                    <div class="aboutrequirebox_item u-p-20" v-for="i in 4">
                        <img src="../../assets/首页/daogu.png" alt="">
                        <p class="title u-m-tb-10">阿斯顿</p>
                        <p class="grey">预算资金：100万</p>
                        <p class="grey u-m-tb-10">技术领域：啊口水都快</p>
                    </div>
                </div>
            </div>
            <el-divider />
           
            <!-- 技术成果 -->
            <div class="aboutrequire">
                <div class="title">
                    技术成果
                </div>
                <div class="aboutrequirebox u-m-tb-20">
                    <div class="aboutrequirebox_item u-p-20" v-for="i in 4">
                        <img src="../../assets/首页/daogu.png" alt="">
                        <p class="title u-m-tb-10">阿斯顿</p>
                        <p class="grey hidden-1">合作方式：技术转让啊啊啊啊啊啊啊啊啊啊啊啊</p>
                        <p class="grey u-m-tb-10">项目阶段：批量生产</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { ArrowRight } from '@element-plus/icons-vue'
const route = useRoute()
onMounted(() => {
    console.log(route.query.id)
})


</script>
<style lang="scss" scoped>
@mixin flex {
    display: flex;
    align-items: center;
}

.page {
    background: rgb(250, 248, 259);
    width: 100%;



    .bread {
        max-width: 1400px;
        box-sizing: border-box;
        margin: 20px auto;
    }
}

.mainbox {
    max-width: 1400px;
    margin: 20px auto;

    background: #fff;
    border-radius: 10px;
    box-sizing: border-box;

    .title {
        font-size: 20px;
        font-weight: bold;
    }

    .mainbox_top {
        @include flex();
        box-sizing: border-box;

        img {
            width: 200px;
            height: 140px;
        }

        .mainbox_top_right {
            width: calc(100% - 200px);
        }

        .mainbox_top_right_top {
            @include flex();
            justify-content: space-between;
            width: 100%;
        }

        .mainbox_top_right_content {
            font-size: 14px;

            .mainbox_top_right_content_item {
                display: flex;

                .samewidth {
                    width: 350px;
                }
            }
        }
    }

    .reasultdetail {
        padding: 0 40px;

        p {
            font-size: 14px;
        }
    }

    .aboutrequire {
        padding: 0 40px;

        .aboutrequirebox {
            @include flex();

            .aboutrequirebox_item {
                box-shadow: 1px 1px 10px 1px #efefef;

                img {
                    width: 290px;
                    height: 130px;
                }

                .grey {
                    color: #999;
                    font-size: 14px;
                }

                &:nth-child(n+2) {
                    margin-left: 80px;
                }
            }
        }

        .contentitem {
            padding: 20px;
            margin: 20px;
            background: url('../../assets/首页/technology.png');
            width: 30%;
            background-size: 100% 100%;
            display: flex;
        }

        img {
            width: 100px;
            height: 130px
        }

       
        .contentitem_text {
            font-size: 16px;

            .level {
                color: #999;
            }
        }
    }
}
</style>